/* control-appmenu 菜单 start */
$control-appmenu: (
  'collapse-item-hover-color': getCssVar(color, primary),
  'collapse-item-padding': getCssVar(spacing, base),
  'icon-width': getCssVar(width-icon, extra-large),
  'icon-height': getCssVar(width-icon, extra-large),
  'icon-margin': 0 10px 0 0,
);

$control-appmenu-item: (
  'selected-color': getCssVar(color, text, 1),
  'selected-bg-color': getCssVar(color, primary),
  'hover-color': getCssVar(color, text, 0),
  'hover-bg-color': getCssVar(color, primary, hover),
  'padding': getCssVar(spacing, base),
  'font-size': getCssVar(font-size, header-5),
  'height': 52px,
  'color': getCssVar(color, text, 0),
  'horizontal-selected-color': getCssVar(color, white),
  'horizontal-selected-bg-color': getCssVar(color, primary),
  'horizontal-hover-color': getCssVar(color, white),
  'horizontal-hover-bg-color': getCssVar(color, primary, hover),
  'horizontal-color': getCssVar(color, white),
  'horizontal-font-size': getCssVar(font-size, header-5),
  'horizontal-height': 40px,
  'horizontal-border-radius': getCssVar(border-radius, medium),
  'horizontal-padding': getCssVar(spacing, base),
  'horizontal-padding-right': getCssVar(spacing, super-loose),
);

/* control-appmenu 菜单 end */

// 垂直菜单项样式
@mixin menu-item-vertical-style {
  @include flex(row, flex-start, center);

  width: 100%;
  height: getCssVar('control-appmenu-item', 'height');
  font-size: getCssVar('control-appmenu-item', 'font-size');
  color: getCssVar('control-appmenu-item', 'color');
  white-space: nowrap;

  &.is-active {
    color: getCssVar('control-appmenu-item', 'selected-color');
    background-color: getCssVar('control-appmenu-item', 'selected-bg-color');
  }

  &:hover {
    color: getCssVar('control-appmenu-item', 'hover-color');
    background-color: getCssVar('control-appmenu-item', 'hover-bg-color');
  }
}

// 水平菜单项样式
@mixin menu-item-horizontal-style {
  height: getCssVar('control-appmenu-item', 'horizontal-height');
  padding: getCssVar('control-appmenu-item', 'horizontal-padding');
  font-size: getCssVar('control-appmenu-item', 'horizontal-font-size');
  line-height: initial;
  color: getCssVar('control-appmenu-item', 'horizontal-color');
  white-space: nowrap;
  border: none;
  border-radius: getCssVar('control-appmenu-item', 'horizontal-border-radius');

  &.is-active {
    // element-plus 给了 !important，所以这里也要加上
    color: getCssVar('control-appmenu-item', 'horizontal-color') !important;
    background-color: transparent;
  }

  &:hover {
    color: getCssVar('control-appmenu-item', 'horizontal-hover-color');
    background-color: getCssVar(
      'control-appmenu-item',
      'horizontal-hover-bg-color'
    );
  }
}

// 收缩菜单项样式
@mixin menu-collapse-item-style {
  @include flex-center;

  padding: calc(getCssVar('control-appmenu', 'collapse-item-padding') * 0.875)
    calc(getCssVar('control-appmenu', 'collapse-item-padding') * 1.5);

  &:hover {
    color: getCssVar('control-appmenu', 'collapse-item-hover-color');
  }
}

// 菜单项选中样式
@mixin menu-item-selected-style {
  color: getCssVar('control-appmenu-item', 'selected-color');
  background-color: getCssVar('control-appmenu-item', 'selected-bg-color');
}

@include b(control-appmenu) {
  position: static;
  width: 100%;
  height: 100%;
  overflow-y: auto;

  @include set-component-css-var('control-appmenu', $control-appmenu);
  @include set-component-css-var('control-appmenu-item', $control-appmenu-item);

  .el-menu {
    border-right: 0;
  }

  .el-sub-menu {
    .el-sub-menu__icon-arrow {
      right: 14px;
      width: 12px;
    }

    .el-menu-item {
      padding: calc(getCssVar('control-appmenu', 'item-padding') * 0.875)
        calc(getCssVar('control-appmenu', 'item-padding') * 2.5);
    }
  }

  // 垂直
  .el-menu--vertical {
    width: 100%;

    // 菜单项样式
    .el-menu-item,
    .el-sub-menu__title {
      @include menu-item-vertical-style;
    }
  }

  // 水平
  .el-menu--horizontal {
    gap: 16px;
    align-items: center;
    height: 100%;
    background-color: transparent;
    border-bottom: none;

    // 菜单项样式
    .el-menu-item,
    .el-sub-menu__title {
      @include menu-item-horizontal-style;

      .el-sub-menu__icon-arrow {
        position: absolute;
        top: 50%;
        right: 16px;
      }
    }

    .el-sub-menu__title {
      padding-right: getCssVar(
        'control-appmenu-item',
        'horizontal-padding-right'
      );
    }

    // 激活
    > .el-sub-menu.is-active .el-sub-menu__title {
      color: getCssVar('control-appmenu-item', 'horizontal-selected-color');
      background-color: getCssVar(
        'control-appmenu-item',
        'horizontal-selected-bg-color'
      );
    }

    // 悬浮
    > .el-sub-menu:hover .el-sub-menu__title {
      color: getCssVar('control-appmenu-item', 'horizontal-hover-color');
      background-color: getCssVar(
        'control-appmenu-item',
        'horizontal-hover-bg-color'
      );
    }

    &::-webkit-scrollbar-thumb {
      background-color: getCssVar(color, 'white');
    }
  }

  // 图标样式
  @include e(icon) {
    margin: getCssVar('control-appmenu', 'icon-margin');
  }

  // 收缩
  @include when(collapse) {
    @include e(item) {
      @include menu-collapse-item-style;
    }
    @include b(control-appmenu-tooltip) {
      width: 100%;
    }
    @include b(control-appmenu-submenu) {
      display: block;

      > .el-sub-menu__title {
        @include flex-center;
        @include menu-collapse-item-style;

        white-space: nowrap;
        cursor: pointer;
      }
      @include e(item) {
        padding: 0;
      }
    }
  }

  .#{bem('control-appmenu', 'counter')} {
    position: absolute;
    top: 50%;
    right: 5px;
    height: 20px;
    padding: 0 6px;
    line-height: initial;
    color: #fff;
    background-color: #f56c6c;
    border-radius: 10px;
    transform: translateY(-50%);
  }
}

// 收缩时菜单项样式
.el-menu--popup-container {
  @include set-component-css-var('control-appmenu', $control-appmenu);
  @include set-component-css-var('control-appmenu-item', $control-appmenu-item);

  border: none;
  box-shadow: getCssVar('shadow', 'elevated');

  .el-menu--popup {
    padding: getCssVar('spacing', 'extra-tight');
    background-color: getCssVar('color', 'primary');

    .el-menu-item,
    .el-sub-menu__title {
      @include flex(row, flex-start, center);

      width: 100%;
      height: getCssVar('control-appmenu-item', 'horizontal-height');
      font-size: getCssVar('control-appmenu-item', 'font-size');
      color: getCssVar('control-appmenu-item', 'horizontal-color');
      white-space: nowrap;

      &.is-active {
        color: getCssVar('control-appmenu-item', 'horizontal-selected-color');
        background-color: getCssVar(
          'control-appmenu-item',
          'selected-bg-color'
        );
      }

      &:hover {
        color: getCssVar('control-appmenu-item', 'horizontal-selected-color');
        background-color: getCssVar('control-appmenu-item', 'hover-bg-color');
      }

      .el-icon {
        display: none;
      }
    }
  }
}
